@charset "UTF-8";

.header-container {
  background-color: #000;
}

.black {
  z-index: 9;
}

body {
  padding: 0 !important;
}

.detail-box {
  width: 1105px;
  height: 500px;
  margin: 0 auto;
  margin-top: 77px;
  border-bottom: 1px solid gainsboro;
}

.detail-box .detail-left {
  float: left;
  width: 460px;
  height: 460px;
  margin-right: 110px;
  position: relative;
}

.detail-box .detail-left .small {
  position: relative;
}

.detail-box .detail-left .mask {
  width: 150px;
  height: 150px;
  background: rgba(158, 158, 152, 0.4);
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: move;
  display: none;
}

.detail-box .detail-left .big {
  width: 550px;
  height: 550px;
  position: absolute;
  top: 0;
  left: 470px;
  z-index: 2;
  overflow: hidden;
  display: none;
}

.detail-box .detail-left .big img {
  position: absolute;
}

.detail-box .detail-right {
  position: relative;
  float: left;
  width: 433px;
}

.detail-box .detail-right .dbox1 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 8px;
}

.detail-box .detail-right .dbox2 {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 26px;
}

.detail-box .detail-right .dbox3 {
  font-size: 20px;
  margin-bottom: 48px;
}

.detail-box .detail-right .dbox4 {
  width: 432px;
  height: 42px;
  border: 1px solid gainsboro;
  padding: 10px 20px;
  box-sizing: border-box;
}

.detail-box .detail-right .dbox5 {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.detail-box .detail-right .dbox5 .details-num-text {
  font-size: 15px;
  margin-right: 20px;
  flex: 1;
}

.detail-box .detail-right .dbox5 .details-num-text span {
  opacity: 0.55;
}

.detail-box .detail-right .dbox5 .details-num-change {
  position: relative;
}

.detail-box .detail-right .dbox5 .details-num-change .detail-change-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 122px;
  height: 40px;
  border: 1px solid #b2b2b2;
  color: #5e5e5e;
  font-size: 15px;
  padding: 0 16px;
}

.detail-box .detail-right .dbox5 .details-num-change .detail-change-num .detail-pc-reduce {
  display: inline-block;
  width: 9px;
  height: 1px;
  background: url(https://res.lancome.com.cn/build/images/new-pdp/reduce_mob.png);
  background-size: contain;
}

.detail-box .detail-right .dbox5 .details-num-change .detail-change-num .detail-pc-sum {
  align-items: center;
}

.detail-box .detail-right .dbox5 .details-num-change .detail-change-num .detail-pc-add {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: url(https://res.lancome.com.cn/build/images/new-pdp/add_mob.png);
  background-size: contain;
}

.detail-box .detail-right .dbox6 {
  font-size: 15px;
  margin-top: 40px;
}

.detail-box .detail-right .dbox7 {
  font-size: 15px;
  opacity: 0.55;
}

.detail-box .detail-right .dbox8 {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid #efefef;
}

.detail-box .detail-right .dbox8 .add-shop-cart,
.detail-box .detail-right .dbox8 .buy-now {
  width: 208px;
  height: 48px;
  border: 0;
  outline: 0;
  font-size: 14px;
  line-height: 48px;
  text-align: center;
  color: white;
  cursor: pointer;
  font-family: "微软雅黑";
  background: #000;
}

.img-introduce {
  margin-top: 50px;
  width: 100%;
}

.img-introduce img {
  max-width: 100%;
  display: block;
  margin: 0px auto;
  width: 790px;
}

.back-top {
  font-size: 0;
  width: 50px;
  height: auto;
  text-align: center;
  background: 0 0;
  position: fixed;
  right: 0;
  bottom: 100px;
  z-index: 8;
  cursor: pointer;
  display: block;
}

.back-top .top img:hover,
.back-top a:hover {
  width: 120%;
  position: relative;
  right: 5px;
}

.back-top div {
  margin-bottom: 3px;
}

.back-top div a {
  width: 50px;
  height: 50px;
  display: block;
  color: white;
  background: #323332;
  font-size: 18px;
}

.back-top div a:hover {
  background: #9fc8ce;
}